{include file="public/header"/}
<script src="{__PUBLIC_PATH}/common/js/jquery.js?v={$version}"></script>
<script src="{__PUBLIC_PATH}/admin/pcf/global.js?v={$version}"></script>
</head>
<body>
<style>
.layui-table-cell {height:30px!important;}
.arctype-btn-expand{float:left;margin:3px 6px 0 0;display:block;width:14px;height:14px;background:url(/common/images/ico_plus.png) center center;}
.arctype-btn-fold{float:left;margin:3px 6px 0 0;display:block;width:14px;height:14px;background:url(/common/images/ico_minus.png) center center;}
</style>
<div class="layui-fluid" id="LAY-component-layer-list">
<div class="layui-card">
    <div class="layui-card-body" style="padding:10px;">
       <div class="layui-form toolbar">
           <div class="layui-form-item">
               <div class="layui-inline">
                    <div class="layui-btn-group">
                        {volist name="$PosiData" id="pt"}
                        {eq name='$pt.position_id' value='$position_id'}
                        <a class="layui-btn layui-btn-normal" href="{:url('/nav/index',['position_id'=>$pt.position_id])}">
                        {$pt.position_name}</a> 
                        {else/}
                        <a class="layui-btn" href="{:url('/nav/index',['position_id'=>$pt.position_id])}">{$pt.position_name}</a> 
                        {/eq}
                        {/volist}
                    </div>
                    <div class="layui-btn-group">
                        <input type="button" value="添加菜单" class="layui-btn layui-btn-danger" data-type="Nav_add"/>
                    </div>
               </div>
            </div>
       </div>
       <table id="table1" lay-filter="table1"></table>
    </div>
</div>
</div>

<script type="text/html" id="targetTpl">
<input type="checkbox" name="target" data-id="{{d.nav_id}}" value="{{d.target}}" lay-skin="switch" lay-text="是|否" lay-filter="target" {{ d.target == 1 ? 'checked' : ''}}>
</script>
<script type="text/html" id="switchTpl">
<input type="checkbox" name="status" data-id="{{d.nav_id}}" value="{{d.status}}" lay-skin="switch" lay-text="正常|停用" lay-filter="status" {{ d.status == 1 ? 'checked' : ''}}>
</script>
<script type="text/html" id="oper-col">
<a class="layui-btn layui-btn-primary layui-btn-sm" data-type="Nav_edit" data-id="{{d.nav_id}}">编辑</a>
{{# if(d.grade < {$nav_max_level - 1}){ }}
<a class="layui-btn layui-btn-danger layui-btn-sm" data-type="Nav_addson" data-id="{{d.nav_id}}">增加子菜单</a>
{{# }else{ }}
<a class="layui-btn layui-btn-disabled layui-btn-sm">不支持增加</a>
{{# } }}
<a class="layui-btn layui-btn-warm layui-btn-sm" data-type="del" data-title="{{d.nav_name}}" data-id="{{d.nav_id}}">删除</a>
</script>
{include file="public/footer"/}
<script>
    layui.use(['layer', 'form', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var treetable = layui.treeTable;
        var tbDataList = [];
        var position_id = {$position_id};
        // 渲染表格
        var insTb = treetable.render({
            elem: '#table1',
            tree: {
                iconIndex: 1,
                idName: 'nav_id',
                pidName: 'parent_id',
                isPidData: true
            },
            cellMinWidth: 100,
            cols: [
                {field: 'nav_id', title: 'ID', width: 80},
                {field: 'nav_name', title: '<a href="javascript:;" class="arctype-btn-expand" id="btn-expand"></a><a href="javascript:;" class="arctype-btn-fold" id="btn-fold" style="display:none;"></a>菜单名称', minWidth: 300},
                {field: 'target', title: '新窗口打开', width: 120,align:'center',templet:'#targetTpl', unresize:true},
                {field: 'status', title: '状态', width: 100, align:'center',templet:'#switchTpl', unresize:true},
                {title: '排序',align: 'center',templet: function (d) {
                    if(d.sort_order){
                       var html = "<input type='text' size='4' data-id='"+d.nav_id+"' value='"+d.sort_order+"' id='sort_order' class='layui-input' style='height:28px;'/>";
                    }else{
                       var html = ""+d.sort_order+""; 
                    }
                    return html;
                }, width: 80},
                {title: '操作', templet: '#oper-col', singleLine: false, align: 'center', width: 250}
            ],
            reqData: function (data, callback) {
                $.post("{:url('/nav/index')}?position_id="+position_id, function (res) {
                    tbDataList = res.data ? res.data : [];
                    callback(res.data);
                }, 'json');
            }
        });

        $('#btn-expand').click(function () {
            $('#btn-expand').hide();
            $('#btn-fold').show();
            insTb.expandAll('#table1');
        });

        $('#btn-fold').click(function () {
            $('#btn-expand').show();
            $('#btn-fold').hide();
            insTb.foldAll('#table1');
        });

        $(document).on("click","#LAY-component-layer-list .layui-btn",function(){
          var type = $(this).data('type');
          active[type] && active[type].call(this);
        });

        //触发事件
        var active = {
            Nav_add: function(){
                layer.open({
                    type: 2,
                    title: '添加导航',
                    fixed: true,
                    shadeClose: false,
                    shade: 0.3,
                    area: ['100%', '100%'],
                    content: '{:url("/Nav/add")}?position_id='+position_id
                });
            },
            Nav_addson: function(){
                var obj = this;
                var id = $(obj).attr('data-id');
                layer.open({
                    type: 2,
                    title: '添加子导航',
                    fixed: true,
                    shadeClose: false,
                    shade: 0.3,
                    area: ['100%', '100%'],
                    content: '{:url("/Nav/add")}?position_id='+position_id+'&parent_id='+id
                });
            },
            Nav_edit: function(){
                var obj = this;
                var id = $(obj).attr('data-id');
                layer.open({
                    type: 2,
                    title: '修改导航',
                    fixed: true,
                    shadeClose: false,
                    shade: 0.3,
                    area: ['100%', '100%'],
                    content: '{:url("/Nav/edit")}?nav_id='+id
                });
            },
            del: function(){
                var obj = this;
                var ntitle = $(obj).attr('data-title');
                var nav_id = $(obj).attr('data-id');
                layer.msg('确定要删除“' + ntitle + '”吗？', {
                    btnAlign: 'c',
                    time: 0,
                    btn: ['确定', '取消'],
                    yes: function(index, layero){
                        layer.close(index);
                        $.get("{:url('/Nav/del')}", {
                            nav_id: nav_id
                        }, function (res) {
                            layer.closeAll('loading');
                            if (res.status) {
                                layer.msg(res.msg,{time:1000},function(){
                                    location.reload();
                                });
                            } else {
                                layer.msg(res.msg, {icon: 2,time:1000});
                            }
                        }, 'json');
                    }
                });
            }
        }

        //开启关闭
        form.on('switch(status)', function(){
            if ($(this).val() == 0){
                $(this).val(1);
            }else{
                $(this).val(0);
            }
            var dataid = $(this).attr('data-id');
            var pcfurl = '{:url("/index/changeTableVal")}';
            changeTableVal('nav_list','nav_id',dataid,'status',this,pcfurl,'nav/index');
        });

        //开启关闭
        form.on('switch(target)', function(){
            if ($(this).val() == 0){
                $(this).val(1);
            }else{
                $(this).val(0);
            }
            var dataid = $(this).attr('data-id');
            var pcfurl = '{:url("/index/changeTableVal")}';
            changeTableVal('nav_list','nav_id',dataid,'target',this,pcfurl,'nav/index');
        });

        // 监听排序
        $(document).on("change","#LAY-component-layer-list #sort_order",function(){
            var dataid = $(this).attr('data-id');
            var pcfurl = '{:url("/index/changeTableVal")}';
            changeTableVal('nav_list','nav_id',dataid,'sort_order',this,pcfurl);
            self.window.location.reload();
        })


    });
</script>
</body>
</html>